<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @cancel="handleCancel">
    <a-spin :spinning="spinning != 0">
      <a-button-group style="margin-bottom: 8px;">
        <a-button icon="usergroup-add" @click="handleAdd" type="primary">{{$t('m.bpm.other.add_role')}}
        </a-button>
        <a-button icon="reload" @click="refresh">{{ $t('m.common.button.refresh') }}</a-button>
        <a-checkbox style="padding-left: 10px" v-model="checkedAllStartRole" @change="onChangeAllStartRole">{{$t('m.bpm.other.allow_all_role')}}
        </a-checkbox>
      </a-button-group>

      <a-table
        :columns="columns"
        rowKey="id"
        :dataSource="data"
        bordered
        size="small"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handleDelete(record)">{{ $t('m.common.button.delete') }}</a>
        </span>
      </a-table>
    </a-spin>

    <template slot="footer">
      <a-button key="close" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
    </template>

    <Select-Role-Modal ref="selectRoleModal" @selectFinished="selectRoleOK"></Select-Role-Modal>

  </ych-modal>
</template>

<script>

  import { getAction, postAction, putAction, deleteAction } from '@/api/manage'
  import SelectRoleModal from '../../system/select/SelectRoleModal'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'BpmStartRoleDialog',
    components: {
      SelectRoleModal
    },
    data () {
      return {
        title: this.$t('m.bpm.other.start_permission'),
        visible: false,
        data: [],
        checkedAllStartRole: false,
        spinning: 0,
        columns: [{
          title:this.$t('m.common.label.number'),
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        }, {
          title: this.$t('m.system.role.entity.roleName'),
          align: 'center',
          width: 180,
          dataIndex: 'name'
        }, {
          title: this.$t('m.common.label.operate'),
          dataIndex: 'action',
          align: 'center',
          width: 120,
          scopedSlots: { customRender: 'action' },
        }],
        url: {
          getProcessStartRoleList: YchConstant.PREFIX_BPM + '/bpm-back/processDefRest/getProcessStartRoleList/v1',
          addProcessStartRole: YchConstant.PREFIX_BPM + '/bpm-back/processDefRest/addProcessStartRole/v1',
          deleteProcessStartRole: YchConstant.PREFIX_BPM + '/bpm-back/processDefRest/deleteProcessStartRole/v1',
          changeAllProcessStartRole: YchConstant.PREFIX_BPM + '/bpm-back/processDefRest/changeAllProcessStartRole/v1',
        },
        processDefId: null
      }
    },
    methods: {
      open (processDefId) {
        this.processDefId = processDefId
        this.data = []
        this.checkedAllStartRole = false
        this.visible = true
        this.refresh()
      },
      refresh () {
        const that = this
        that.spinning++
        getAction(this.url.getProcessStartRoleList, { id: this.processDefId }).then((res) => {
          if (res.success) {
            that.data = res.result.data
            that.checkedAllStartRole = res.result.checkedAllStartRole
          } else {
            that.messageUtil.warning(res.message)
          }
        }).finally(() => {
          that.spinning--
        })
      },
      handleAdd () {
        this.$refs.selectRoleModal.visible = true
      },
      handleDelete (record) {
        const that = this
        that.spinning++
        deleteAction(this.url.deleteProcessStartRole, { id: this.processDefId, roleId: record.id }).then((res) => {
          if (res.success) {
            that.data.splice(that.data.indexOf(record), 1)
            that.messageUtil.success(res.message)
          } else {
            that.messageUtil.warning(res.message)
          }
        }).finally(() => {
          that.spinning--
        })
      },
      selectRoleOK (data) {
        if (data.length == 0) {
          return
        }
        let roleIdList = []
        for (var a = 0; a < data.length; a++) {
          roleIdList.push(data[a])
        }
        const that = this
        that.spinning++
        postAction(this.url.addProcessStartRole + '?id=' + this.processDefId, { roleIdList: roleIdList }).then((res) => {
          if (res.success) {
            that.refresh()
            that.messageUtil.success(res.message)
          } else {
            that.messageUtil.warning(res.message)
          }
        }).finally(() => {
          that.spinning--
        })
      },
      onChangeAllStartRole () {
        this.spinning++
        putAction(this.url.changeAllProcessStartRole + '?id=' + this.processDefId + '&checked=' + this.checkedAllStartRole, {}).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
            if (this.checkedAllStartRole) {
              this.handleCancel()
            }
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.spinning--
        })
      },
      handleCancel () {
        this.visible = false
      }
    }
  }
</script>
